import { customCompoents } from "andy-ui/src/vue-base/custom-components";
import BaseComponent from "../../app/baseComponent";

class AUIProgress extends BaseComponent {
    constructor(name) {
        super(name);
        this.props = {
            max: {
                type: Number,
                default: 100
            },
            value: {
                type: Number,
                default: 50
            }
        };
        this.watch = {
            value: function (newval) {
                var self = this;
                self.valueStyle = {
                    width: self.calcPercent(newval)
                }
            }
        };

        this.methods = {
            calcPercent(value) {
              return (this.value / this.max * 100)  + "%";
            }
        }
    }
    _template() {
        var self = this;
        return `<div class="${self._name}"><div class="${self._name}__bar"><div class="${self._name}__value" :style="valueStyle"></div></div></div></div>`;
    }
    _mounted() {
        var self = this;
        self.valueStyle = {
            width: self.calcPercent(self.value)
        }
    }
    _data() {
        var ret = {};
        ret.valueStyle = {
            width: 0
        };
        return ret;
    }
}

customCompoents.define("aui-progress", AUIProgress);